<%--
  Created by IntelliJ IDEA.
  User: acer
  Date: 2024-8-14
  Time: 20:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>空气质量监测信息库</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <style>
        table {
            width: 45%;
            margin: 0 auto;
            border-collapse: collapse;
        }

        th, td {
            border: 3px solid white;
            text-align: center;
            padding: 10px;
        }

        th {
            background-color: cadetblue;
            color: #fff;
        }

        tr:nth-child(even) {
            background-color: mediumseagreen;
        }

        tr:hover {
            background-color: #ccc;
        }

        a:hover {
           color: blue;
        }

        a {
            color: gray;
        }
    </style>
</head>
<body>
<h2 style="text-align: center;">空气质量监测信息库</h2>
<div>
    <table id="info">
        <thead>
        <div style="width: 250px; margin-left: 1000px;">
            <a href="add.jsp" id="add" style=" font-size: larger; padding-top: 100px; color: slateblue">添加空气质量信息</a>
        </div>
        <tr>
            <th>序号</th>
            <th>区域</th>
            <th>检测时间</th>
            <th>PM10数据</th>
            <th>PM2.5数据</th>
            <th>监测站</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
</div>
<div style="margin:0 auto; width: 350px; ">
    <a href="javascript:void(0);" id="first" class="page">首 页 |</a>&nbsp;&nbsp;
    <a href="javascript:void(0);" id="pre" class="page">&lt;&lt;上一页|</a>&nbsp;&nbsp;
    <a href="javascript:void(0);" id="next" class="page">&gt;&gt;下一页|</a>&nbsp;&nbsp;
    <a href="javascript:void(0);" id="last" class="page">尾页</a>&nbsp;&nbsp;
    <a href="javascript:void(0);" id="page1"  class="page">1</a>&nbsp;&nbsp;
    <a href="javascript:void(0);" id="totalPage1" class="page">1</a>&nbsp;&nbsp;
    <a href="javascript:void(0);" id="pageNum1"  class="page">1</a>
</div>
<script>
    var currPage;
    var tpages;
    $(document).ready(function () {
        var p1=document.getElementById("page1").innerHTML;
        var p2=document.getElementById("totalPage1").innerHTML;
        var p3=document.getElementById("pageNum1").innerHTML;
        var getInfoList = function (curr) {//给函数起名，传参curr当前页数
            $.ajax({
                url: "/show.do",
                type: "post",
                dataType: "json",
                data: {
                    pageSize: 4,
                    pageNum: curr || 1,

                },
                success: function (data) {
                    $("#tbody").find("tr").remove();
                    var tbody = $('#tbody');
                    $.each(data.info, function (index, info) {
                        tbody.append('<tr><input type="checkbox" name="msg"><td>'
                            + info.id + '</td><td>'
                            + info.district.name + '</td><td>'
                            + info.monitorTime + '</td><td>'
                            + info.pm10 + '</td><td>'
                            + info.pm25 + '</td><td>'
                            + info.monitoringStation + '</td></tr>');
                    });
                    currPage = data.pageNum;
                    tpages = data.totalPages;
                    p1=`第${currPage}页/`
                    p2=`共${tpages}页`
                    p3=`(${data.count}条)`
                    console.log(p1);
                    console.log(p2);
                    console.log(p3);
                    console.log(currPage);
                    console.log(tpages);
                    console.log(data.count);

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("Error: " + textStatus);
                },



            });
        }
        $(".page").click(function () {
            var flag = $(this).attr("id");
            if (flag == "first") {
                getInfoList(1);
            } else if (flag == "pre") {
                currPage--;
                getInfoList(currPage);
            } else if (flag == "next") {
                currPage++;
                getInfoList(currPage);
            } else if (flag == "last") {
                getInfoList(tpages)
            }

        })
        getInfoList();
        $('#search').click(function () {
            getInfoList();
        })

    });

</script>
</body>
</html>
